<template>
	<ele-modal :width="950" :visible="visible" :confirm-loading="loading" :title="'创建退货单'"
		:body-style="{ paddingBottom: '8px' }" @update:visible="updateVisible" @ok="save">
		<div class="backH">
			<table cellpadding="0" cellspacing="0" class="recepit_table2">
				<tr>
					<td class="tit">销售单号</td>
					<td>{{ info.order_sn || '' }}</td>
					<td class="tit">销售时间</td>
					<td>{{ info.sales_time || '' }}</td>
				</tr>
				<tr>
					<td class="tit">会员昵称</td>
					<td>{{ info.nickname || '' }}</td>
					<td class="tit">会员手机</td>
					<td>{{ info.mobile || '' }}</td>
				</tr>
			</table>
			<div class="kd-solid margin-top-15">
				<div class="flex">
					<!-- 左侧-->
					<div class="flex1">
						<div class="flex align-center">
							<div class="kd_left">图片</div>
							<div class="kd_right flex align-center">
								<a-image :width="30" :height="30" :src="info2.thumb_url" />
							</div>
						</div>
						<div class="flex align-center">
							<div class="kd_left required">原条码</div>
							<div class="kd_right">{{ info2.bar_code || '' }}</div>
						</div>
						<div class="flex align-center">
							<div class="kd_left required">金料类型</div>
							<div class="kd_right">{{ info2.gold_category_code_name || '' }}</div>
						</div>
						<!-- <div class="flex align-center">
							<div class="kd_left required">小类</div>
							<div class="kd_right">{{ info2.subclass_code_name || '' }}</div>
						</div> -->
						<div class="flex align-center">
							<div class="kd_left required">成色</div>
							<div class="kd_right">{{ info2.quality_code_name || '' }}</div>
						</div>
						<div class="flex align-center">
							<div class="kd_left required">宝石类型</div>
							<div class="kd_right">{{ info2.gem_category_name || '' }}</div>
						</div>
						<div class="flex align-center">
							<div class="kd_left required">品类</div>
							<div class="kd_right">{{ info2.classes_name || '' }}</div>
						</div>
						<div class="flex align-center">
							<div class="kd_left required">货品名称</div>
							<div class="kd_right">{{ info2.name || '' }}</div>
						</div>
						<div class="flex align-center">
							<div class="kd_left required">数量</div>
							<div class="kd_right">{{ info2.num || '' }}</div>
						</div>
						<!-- <div class="flex align-center">
							<div class="kd_left">原金重</div>
							<div class="kd_right">{{ info2.gold_weight_old || '' }}</div>
						</div> -->
						<div class="flex align-center">
							<div class="kd_left required">净金重</div>
							<div class="kd_right">{{ info2.gold_weight || '' }}</div>
							<span class="kd_right_text">g</span>
						</div>
						<div class="flex align-center">
							<div class="kd_left">货重</div>
							<div class="kd_right">{{ info2.piece_weight || '' }}</div>
							<span class="kd_right_text">g</span>
						</div>
						<div class="flex align-center">
							<div class="kd_left">标签价</div>
							<div class="kd_right">{{ info2.sticker_price || 0 }}</div>
							<span class="kd_right_text">元</span>
						</div>
						<!-- <div class="flex align-center">
							<div class="kd_left">实际成色</div>
							<div class="kd_right">{{ info2.real_quality || 0 }}</div>
							<span class="kd_right_text">%</span>
						</div>
						<div class="flex align-center">
							<div class="kd_left">折足重</div>
							<div class="kd_right">{{ info2.lumping_weight || 0 }}</div>
							<span class="kd_right_text">g</span>
						</div> -->
					</div>
					<!-- 右侧 -->
					<div class="flex1">
						
						<div class="flex align-center">
							<div class="kd_left">实售价</div>
							<div class="kd_right">{{ info2.real_amount || 0 }}</div>
							<span class="kd_right_text">元</span>
						</div>
						<div class="flex align-center">
							<div class="kd_left required">主石重量</div>
							<div class="kd_right">{{ info2.main_stone_weight || 0 }}</div>
							<span class="kd_right_text">ct</span>
						</div>
						<div class="flex align-center">
							<div class="kd_left">主石颜色</div>
							<div class="kd_right">{{ info2.main_stone_color_name || '' }}</div>
						</div>
						<div class="flex align-center">
							<div class="kd_left">主石净度</div>
							<div class="kd_right">{{ info2.main_stone_neatness_name || '' }}</div>
						</div>
						<div class="flex align-center">
							<div class="kd_left">主石切工</div>
							<div class="kd_right">{{ info2.main_stone_cut_name || '' }}</div>
						</div>
						<div class="flex align-center">
							<div class="kd_left">主石数量</div>
							<div class="kd_right">{{ info2.main_stone_num || '' }}</div>
							<span class="kd_right_text">粒</span>
						</div>
						<div class="flex align-center">
							<div class="kd_left">副石石重</div>
							<div class="kd_right">{{ info2.vice_stone_weight || '' }}</div>
							<span class="kd_right_text">ct</span>
						</div>
						<div class="flex align-center">
							<div class="kd_left">副石数量</div>
							<div class="kd_right">{{ info2.vice_stone_num || '' }}</div>
							<span class="kd_right_text">粒</span>
						</div>
						<div class="flex align-center">
							<div class="kd_left">换购金价</div>
							<div class="kd_right">{{ info2.exchange_gold_price || '' }}</div>
							<span class="kd_right_text">元</span>
						</div>
						<div class="flex align-center">
							<div class="kd_left">换购工费</div>
							<div class="kd_right">{{ info2.exchange_labour || '' }}</div>
							<span class="kd_right_text">元
								<template v-if="info2.exchange_labour_type==1">/克</template>
								<template v-if="info2.exchange_labour_type==2">/件</template>
							</span>
						</div>
						<div class="flex align-center">
							<div class="kd_left required">抵扣金额</div>
							<div class="kd_right">{{ info2.discount_amount || '' }}</div>
							<span class="kd_right_text">元</span>
						</div>
						<!-- <div class="flex align-center">
							<div class="kd_left">旧货标记</div>
							<div class="kd_right">{{ info2.sales || '' }}</div>
						</div>
						<div class="flex align-center">
							<div class="kd_left">旧货备注</div>
							<div class="kd_right">{{ info2.note || '' }}</div>
						</div> -->
			
					</div>
				</div>
			</div>
			<div class="kd-solid">
			  <div class="flex align-center">
			    <div class="kd_left">单件备注</div>
			    <div class="kd_right">{{ info2.note || '' }}</div>
			  </div>
			</div>
			<a-form
			  :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
			  :wrapper-col="{ md: { span: 22 }, sm: { span: 20 }, xs: { span: 24 } }"
			>
			  <a-row :gutter="24">
			    <a-col :md="24" :sm="24" :xs="24" style="margin-top:15px;">
					<a-form-item label="抵扣金额">
						<h6>{{ info2.discount_amount || 0 }}</h6>
					</a-form-item>
					<!-- <a-form-item label="折旧金额">
						<a-input allow-clear placeholder="请输入" v-model:value="form.dep_charge" autocomplete="off" type="number"
							@change="change3" />
					</a-form-item> -->
					<a-form-item label="实收金额">
						<a-input allow-clear placeholder="请输入" v-model:value="form.amount" autocomplete="off" />
					</a-form-item>
					<a-form-item label="收款方式">
						<a-select placeholder="请选择" mode="multiple" :options="options" @change="change" @deselect="change2" />
					</a-form-item>
					<template  v-for="(item, index) in options" :key="index">
					  <a-form-item :label="item.label" v-if="item.isSelect">
						<a-input
						  allow-clear
						  placeholder="请输入"
						  v-model:value="form[item.value]"
						  autocomplete="off"
						/>
					  </a-form-item>
					</template>
					<!-- <a-form-item label="现金" v-if="options[0].isSelect">
						<a-input allow-clear placeholder="请输入" v-model:value="form.cash" autocomplete="off" />
					</a-form-item>
					<a-form-item label="微信" v-if="options[1].isSelect">
						<a-input allow-clear placeholder="请输入" v-model:value="form.wechat" autocomplete="off" />
					</a-form-item>
					<a-form-item label="支付宝" v-if="options[2].isSelect">
						<a-input allow-clear placeholder="请输入" v-model:value="form.alipay" autocomplete="off" />
					</a-form-item>
					<a-form-item label="刷卡" v-if="options[3].isSelect">
						<a-input allow-clear placeholder="请输入" v-model:value="form.card" autocomplete="off" />
					</a-form-item>
					<a-form-item label="银行转账" v-if="options[4].isSelect">
						<a-input allow-clear placeholder="请输入" v-model:value="form.transfer" autocomplete="off" />
					</a-form-item> -->
					<a-form-item label="备注">
						<a-input allow-clear placeholder="请输入" v-model:value="form.note" autocomplete="off" />
					</a-form-item>
				</a-col>
			  </a-row>
			</a-form>  
			
			
		</div>
	</ele-modal>
</template>

<script setup>
	import {
		ref,
		unref,
		reactive,
		onMounted,
		watch
	} from 'vue';
	import {
		Modal,
		message
	} from 'ant-design-vue';
	import {
		useRouter
	} from 'vue-router';
	import { get_pay_type_select } from '@/api/setting/pay_type';
	import {
		get_sales_detail,
		item_detail
	} from '@/api/order/order/sales/order_list';

	const emit = defineEmits(['update:visible', 'itemRefund']);
	const props = defineProps({
		// 弹窗是否打开
		visible: Boolean,
		orderSn: String,
		itemId: [Number, String]
	});

	const loading = ref(false);
	const info = ref({});
	const info2 = ref({});
	const payInfo = ref({});
	const goods_list = ref([]);
	const ornament_list = ref([]);
	const new_exchange_list = ref([]);
	const junk_exchange_list = ref([]);
	const junk_recovery_list = ref([]);
	const gift_list = ref([]);
	const options = ref([/* {
			label: '现金',
			value: 'cash',
			isSelect: false
		},
		{
			label: '微信',
			value: 'wechat',
			isSelect: false
		},
		{
			label: '支付宝',
			value: 'alipay',
			isSelect: false
		},
		{
			label: '刷卡',
			value: 'card',
			isSelect: false
		},
		{
			label: '银行转账',
			value: 'transfer',
			isSelect: false
		} */
	]);
	const form = reactive({
		order_item_id: '',
		order_sn: '',
		dep_charge: '',
		amount: '',
		cash: '',
		wechat: '',
		alipay: '',
		card: '',
		transfer: '',
		note: ''
	});

	onMounted(() => {
		get_pay_type_select().then((res) => {
		  res.forEach((item) => {
		    item.isSelect = false;
		  });
		  options.value = res;
		});
		if (props.itemId) {
			form.order_item_id = props.itemId;
		}
		if (props.orderSn) {
			form.order_sn = props.orderSn;
			getDetail();
		}
	});
	const change = (e) => {
		options.value.forEach((item) => {
			e.forEach((m) => {
				if (item.value == m) {
					item.isSelect = true;
				}
			});
		});
	};
	const change2 = (e) => {
		options.value.forEach((item) => {
			if (item.value == e) {
				item.isSelect = false;
			}
		});
		form[e] = 0;
	};
	/* const change3 = (e) => {
		console.log(e.target.value);
		form.amount = Number(info2.value.pay_amount) - Number(e.target.value);
		console.log(form.amount);
	}; */

	const getDetail = () => {
		get_sales_detail({
			order_sn: props.orderSn
		}).then((res) => {
			info.value = res.order;
			payInfo.value = res.pay;
			goods_list.value = res.item.goods_list;
			ornament_list.value = res.item.ornament_list;
			new_exchange_list.value = res.item.new_exchange_list;
			junk_exchange_list.value = res.item.junk_exchange_list;
			junk_recovery_list.value = res.item.junk_recovery_list;
			gift_list.value = res.item.gift_list;
		});
		item_detail({
			item_id: props.itemId
		}).then((res) => {
			info2.value = res;
			//form.amount = Number(info2.value.pay_amount) - Number(form.dep_charge);
		});
	};

	const save = () => {
		Modal.confirm({
			title: '提示',
			content: '确定退货?',
			maskClosable: true,
			onOk: () => {
				emit('itemRefund', form);
			}
		});
	};

	/* 更新visible */
	const updateVisible = (value) => {
		emit('update:visible', value);
	};
	defineExpose({});
</script>

<style lang="less" scoped>
	.pay_label {
		display: inline-block;
		min-width: 70px;
		text-align: right;
	}
</style>